<template>
  <!-- 柱状图+折线图 -->
  <ve-histogram
    :data="chartData"
    :y-axis="yAxis"
    :extend="chartExtend"
    :settings="chartSettings"
    :colors="color"
    style="width: 100%; height: 100%"
    ref="table"
  ></ve-histogram>
</template>

<script>
export default {
  // props: {
  //   chartData: {
  //     type: Object,
  //     default() {
  //       return {
  //         columns: [],
  //         rows: [],
  //       };
  //     },
  //   },
  // },
  data() {
    this.title = {
      text: "折线图+柱状图",
    };
    this.color = ["rgb(255,204,51)", "rgb(0,143,224)", "rgb(217,0,27)"];
    this.chartSettings = {
      yAxisType: ["0.[00]a", "0.[00]%"],
      showLine: ["达标率"],
      yAxisName: ["数值轴", "比率轴"],
      axisSite: {
        right: ["达标率"],
      },
    };
    this.yAxis = [
      {
        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          color: "#ccc", // 字体
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
      {
        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          color: "red", // 字体
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
    ];
    this.chartExtend = {
      series(v) {
        v.forEach((i) => {
          i.barWidth = 15;
          i.barGap = 0;
          // i.label = {
          //   position: "right",
          //   show: true,
          //   formatter: "{b}:{c}%",
          // };
          i.itemStyle = {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              label: {
                show: true,
                position: "top",
                textStyle: {
                  fontSize: "12",
                  colcor: "red",
                },
              },
            },
          };
        });
        return v;
      },
      xAxis(v) {
        v.forEach((i) => {
          i.show = true;
          i.splitLine = { show: false };
          i.axisTick = { show: true };
          i.axisLine = { show: true };
        });
        return v;
      },
    };
    return {
      chartData: {
        columns: ["日期", "高损", "负损", "达标率"],
        rows: [
          { 日期: "1/3", 高损: 1393, 负损: 1093, 达标率: 1 },
          { 日期: "1/2", 高损: 3530, 负损: 3230, 达标率: 0.11 },
          // { 日期: "1/3", 高损: 2923, 负损: 2623, 达标率: 1200 },
          // { 日期: "1/4", 高损: 1723, 负损: 1423, 达标率: 1300 },
          // { 日期: "1/5", 高损: 3792, 负损: 3492, 达标率: 1600 },
          // { 日期: "1/6", 高损: 4593, 负损: 4293, 达标率: 2000 },
        ],
      },
    };
  },
  // watch: {
  //   chartData: {
  //     handler: function (newnew, oldold) {
  //       console.log(JSON.stringify(newnew));
  //       this.$nextTick(() => {
  //         // this.$refs.table.doLayout();
  //         this.$refs.table.echarts.resize();
  //         // console.log('渲染完成时间', new Date());
  //       });
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
};
</script>